<template>
    <div class="header">
        <p class="logo-box">
            <Icon lass="user-icon" type="ios-people-outline"></Icon>&nbsp;&nbsp;{{ msg }}
        </p>
        <p class="user-box">
            <Icon class="user-icon" type="person"></Icon>
            <span class="user">{{userName}}</span>
            <span class="logout">退出</span>
        </p>
    </div>
</template>

<script>
export default {
    name: 'header',
    data() {
        return {
            msg: '保东门业管理系统',
            userName: '老东西'
        }
    }
}
</script>

<style scoped lang="less">
.header {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    min-width: 500px;
    background: url('../assets/bg.jpg') left top repeat;
    .logo-box {
        float: left;
        color: #fff;
        font-size: 18px;
        font-family: "Times New Roman",Georgia,Serif;
        .user-icon {
            line-height: 50px;
        }
    }
    .user-box {
        float: right;
        font-size: 18px;
        color: #fff;
        .user-icon {
            line-height: 50px;
        }
        .logout {
            margin-left: 20px;
            font-size: 12px;
            cursor: pointer;
            &:hover {
                color: #2d8cf0;
            }
        }
    }
}
    
</style>